<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '设施信息',
    navigationBarTextStyle: '#000000',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#ffffff',
  },
}
</route>

<template>
  <view class="content">
    <view class="topBox">
      <view class="item2" @click="goAdd">
        <view class="mr-[5upx]">
          <wd-icon name="add" size="22px" color="#0083ff"></wd-icon>
        </view>
        添加设施
      </view>
    </view>
    <view class="dataBox">
      <view
        class="dataItem"
        v-for="(item, index) in dataList"
        :key="index"
        @click="() => goDetail(item)"
      >
        <view class="w-[40%]">{{ item.facilityNo }}</view>
        <view class="w-[55%]">
          <view
            :class="{ btn1: item.facilityType == '家具', btn2: item.facilityType == '消防设施' }"
            class="centerItem"
          >
            {{ item.facilityType }}
          </view>
        </view>
        <view><wd-icon name="arrow-right" size="22px"></wd-icon></view>
      </view>
    </view>
  </view>
</template>

<script lang="js" setup>
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
import { getFacilitiesList } from '@/api/administration/facilities.js'
import { useAdministrationStore } from '@/store'

defineOptions({
  name: 'Facilities',
})

const administrationStore = useAdministrationStore()
const dataList = ref([])

onLoad(() => {
  // getList()
})
onShow(() => {
  getList()
})

const goAdd = () => {
  administrationStore.setFacilityInfo({})
  uni.navigateTo({ url: '/pages/administration/facilities/addFacilities' })
}

// 获取数据列表
const getList = async () => {
  const res = await getFacilitiesList()
  dataList.value = res.data.rows || []
}

// 点击进入详情
const goDetail = (item) => {
  administrationStore.setFacilityInfo({
    ...item,
    fileList: item.facilityPic ? [{ url: item.facilityPic, response: item.facilityPic }] : [],
  })
  uni.navigateTo({ url: '/pages/administration/facilities/addFacilities' })
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #f1f1f1;
  min-height: 100vh;
  padding-top: 120upx;
  .topBox {
    height: 100upx;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100vw;
    background-color: white;
    text-align: center;
    .item2 {
      width: 30%;
      color: #0083ff;
      width: 230upx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
  .dataBox {
    background-color: white;
    border-radius: 20upx;
    padding: 20upx;
    width: 85vw;
    margin: 0 auto;
    .dataItem {
      display: flex;
      align-items: center;
      height: 110upx;
      justify-content: space-between;
      border-bottom: 1px solid #d4d3d3;
      .centerItem {
        padding: 5upx 10upx;
        border-radius: 10upx;
        border: 1px solid;
        display: inline-block;
      }
      .btn1 {
        color: #0083ff;
        border-color: #0083ff;
      }
      .btn2 {
        color: #ff6600;
        border-color: #ff6600;
      }
    }
    .dataItem:last-child {
      border-bottom: none;
    }
  }
}
</style>
